<template>
  <div class="chips-list">
      <div v-for="(item,index) in chiplsList" :key="index">
          <div class="active-image">
          <div class="label"><img src="../assets/众筹标签@3x.png" alt=""></div>        
          <router-link :to="'/chips_details/'+item.activityId">
              <img :src="item.activityImage" alt="">
          </router-link>
      </div>
      <p>{{item.activityName}}</p>
      <div class="active-information clear-fix">
          <div class="active-price">
              <span>￥</span>
              <span>{{parseInt(item.money)}}</span>
              <span v-if="(''+item.money).split('.')[1] != undefined">.{{(''+item.money).split('.')[1] || ''}}</span>
          </div>
          <div class="active-watch">
              <img src="../assets/eye.png" alt="">
              <span>{{item.view}}</span>
          </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name: '众筹活动', //title
            chiplsList: []
        }
    },
    created() {
        this.utils.$get(
            this.utils.GET_ACTIVE_LIST,
            data => {
                this.chiplsList = data.data
            },
            { crowdType: 1 }
        )
    },
    mounted() {
        document.title = this.name
    }
}
</script>


<style lang="less">
.chips-list {
    margin-bottom: 1rem;
    > div {
        .active-image {
            width: 100%;
            height: 4.8rem;
            background-color: #666;
            position: relative;
            .label {
                position: absolute;
                left: 0;
                top: 0;
                > img {
                    width: 0.9rem;
                    height: 0.96rem;
                }
            }
            > a {
                display: block;
                width: 100%;
                height: 100%;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        > p {
            padding: 0.2rem 0.4rem 0.3rem 0.3rem;
            color: #333;
            line-height: 0.45rem;
        }
        .active-information {
            padding: 0 0.4rem 0.2rem 0.3rem;
            .active-price {
                float: left;
                color: #f93a3a;
                > span {
                    &:first-child {
                        font-size: 0.28rem;
                    }
                    &:nth-child(2) {
                        font-size: 0.38rem;
                    }
                    &:nth-child(3) {
                        font-size: 0.3rem;
                    }
                }
            }
            .active-watch {
                float: right;
                > img {
                    width: 0.4rem;
                }
                > span {
                    margin-left: 0.12rem;
                    font-size: 0.24rem;
                    color: #999;
                }
            }
        }
    }
}
</style>

